<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String url = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
	
%>  
<html>
<head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品类型</title>
    <link rel="stylesheet" href="<%=basePath%>css/AdminLTE.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css">
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath%>css/ionicons.css">
    <link rel="stylesheet" href="<%=basePath%>css/font-awesome.css">
    <link rel="stylesheet" href="<%=basePath%>css/skins/_all-skins.min.css">  
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="<%=basePath%>css/sweetalert/sweetalert.css">
</head>
<body>
  <section class="content-header">
    <h1>
        我的工作台
        <small>商品类型列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">我的工作台</a></li>
        <li class="active">商品类型列表</li>
    </ol>
</section>

    <section class="content" style="margin-left: 15px;margin-right: 15px;">
    <div class="row" style="margin-top: 15px;">
        <div id="toolbar" class="btn-group">
             <button type="button" class="btn bg-orange" id="add_btn">
                <span class="glyphicon glyphicon-plus-sign"></span>添加
            </button>
        </div>
        <table id="table" data-toggle="table" data-toolbar="#toolbar" data-content-type="application/x-www-form-urlencoded">
            <thead>
            <tr>
                <th>全选</th>
                <th>编号</th>
                <th>商品类型</th>
                <th>商品价格</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</section>
     <div class="modal fade" id="myModalMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            x
                        </button>
                        <h4 class="modal-title" id="myModalMsgLable">
                            商品类型
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="messageName" class="col-sm-2 control-label">商品名称</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="typeName" placeholder="商品名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="messageName" class="col-sm-2 control-label">商品价格</label>
                                <div class="col-sm-10">
                                    <input type="number" class="form-control" id="price" placeholder="商品价格">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="clsMessage_btn">关闭</button>
                        <button type="button" class="btn btn-primary" id="doMessage_btn" onclick="addPayType()">保存</button>
                    </div>
                </div>
            </div>
            </div>
            
</body>
<script src="<%=basePath%>js/jquery-2.2.3.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/bootstrap-table.js"></script>
<script src="<%=basePath%>js/jquery.easyui.min.js"></script>
<script src="<%=basePath%>js/sweetalert/sweetalert.min.js"></script>
<script src="<%=basePath%>js/locales/bootstrap-table-zh-CN.js"></script>
<script src="<%=basePath%>js/locales/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
//默认加载时携带参数  
function queryParams(params) { 
    var temp = { 
      pageSize: params.limit,  
      pageStart: params.offset,  
    };  
    return temp;  
  } 
  
$("#table").bootstrapTable({
    url:"<%=basePath%>payType/getPayTypeListByPage.do",
    method: "post",
    striped: true, //是否显示行间隔色
    cache: true, //是否使用缓存，默认为true
    pagination: true, //是否显示分页（*）
    queryParams: queryParams,//传递参数（*）
    sidePagination: "server",
    pageNumber:1, //初始化加载第一页，默认第一页
    pageSize:5,
    pageList: [5, 10, 20], //可供选择的每页的行数（*）
    showColumns: false, //是否显示所有的列
    showRefresh: true,
    minimumCountColumns: 2, //最少允许的列数
    clickToSelect: true, //是否启用点击选中行
    height:500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    uniqueId: "id", //每一行的唯一标识，一般为主键列
    showToggle:true, //是否显示详细视图和列表视图的切换按钮
    cardView: false, //是否显示详细视图
    detailView: false, //是否显示父子表
    columns: [{
        checkbox: true
    },{
        field: 'id',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'pName',
        align: 'center',
        valign: 'middle'
    }, {
        field: 'pPrice',
        align: 'center',
        valign: 'middle'
    }, 
     {
    field: 'kk',
     title: '操作',
    align: 'center',
    valign: 'middle',
    formatter: operateFormatter
     } 

    ],
});

function operateFormatter(value, row, index) {
    return [
        '<button type="button" class="btn btn-default  btn-sm bg-orange" style="margin-right:15px;" onclick="updatePayType()">修改</button>',
        '<button type="button" class="btn btn-default  btn-sm bg-orange" style="margin-right:15px;" onclick="deletePayType('+row.id+')">删除</button>'
    ].join('');
}

function updatePayType(){
	swal("功能暂未开放");
}

function deletePayType(id){
	$.ajax({  
        type : "post",  
        url : "<%=basePath%>payType/deletePayType.do",  
        data : "id="+id,  
        success : function(data){  
      	  data = $.parseJSON(data);  
      	  swal(data.msg);
      	  $("#table").bootstrapTable('refresh');
        }  
        });  
}

function addPayType(){
	var typeName = $("#typeName").val();
	$.ajax({  
        type : "post",  
        url : "<%=basePath%>payType/addPayType.do",  
        data : {
        	pName:typeName,
        	pPrice:$("#price").val()
        },  
        success : function(data){  
      	data = $.parseJSON(data);  
      	swal(data.msg);
      	$("#myModalMsg").modal("hide");
      	$("#table").bootstrapTable('refresh');
        }  
        });  
}

$("#add_btn").click(function () {
    $("#myModalMsg").modal("show");
});
$("#clsMessage_btn").click(function () {
    $("#myModalMsg").modal("hide");
});

</script>
</html>